<!DOCTYPE html>
<html ng-app="quizApp">
<head>
    <title>Facebook Login JavaScript Example</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
    <link rel="stylesheet" type="text/css" href="css/animation.css" />
</head>
<body>
<div class="container" ng-controller="foxController as foxCtrl" data-ng-init="foxCtrl.init()">
    <div class="btn-sm col-xs-2">
        <div class="btn btn-sm btn-default btn-block" ng-click="foxCtrl.prev()" ng-hide="foxCtrl.currentQuestion() == 0">PREV</div>
    </div>
    <div class="container col-xs-8">
        <h3 class="center-block text-center"> {{ foxCtrl.getQuestion() }} </h3>
        <div class="input-group center-block col-xs-5" ng-show="foxCtrl.currentQuestion() == 0">
            <input class="form-control" type="text" name="userName" id="userName" ng-model="foxCtrl.username" placeholder="Podaj swoje imię"/>
        </div>
        <div class="btn-group btn-group-vertical center-block" role="group">
            <div>
                <div class="btn btn-sm btn-default btn-block" ng-repeat="answer in foxCtrl.getAnswers()" ng-click="foxCtrl.selectAnswer(answer.id)" ng-class="{ 'btn-success': foxCtrl.isSelected(answer.id)  }" >{{ answer.content }}</div>
            </div>
        </div>
        <div class="btn-group btn-group-vertical center-block" role="group">
            {{ foxCtrl.getTmp() }}
        </div>
    </div>
    <div class="btn-sm col-xs-2">
        <div class="btn btn-sm btn-default btn-block" ng-click="foxCtrl.next()" ng-show="foxCtrl.currentQuestion() != foxCtrl.questionLastIndexOf() && foxCtrl.username">NEXT</div>
		<div class="btn btn-sm btn-primary btn-block" ng-click="foxCtrl.check()" ng-show="foxCtrl.currentQuestion() == foxCtrl.questionLastIndexOf()">FINISH</div>
        <div ng-show="!foxCtrl.allAnswers() && foxCtrl.currentQuestion() == foxCtrl.questionLastIndexOf() && foxCtrl.itsOK()">
            <ul class="list-group">
                <li class="list-group-item list-group-item-danger">Musisz odpowiedzieć na wszystkie pytania!</li>
            </ul>
        </div>
	</div>
</div>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/engine.js" ></script>
<script type="text/javascript" src="js/angular-animate.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular-resource.js"></script>
</body>
</html>